<template id="become_coach">
	<div class="become_coach">

		<!--头部-->
		<div class="about_header">

			<div class="about_title">
				<router-link to="/main"><img src="../../assets/images/class/jiantou_03.png" /></router-link>

				<p>成为教练</p>
				<div class="about_select">
					<div class="about_ing"></div>

				</div>

			</div>
		</div>
		<!--头部结束-->

		<!--用户的信息-->
		<div class="become_user">

			<div class="become_info">
				<ul>
					<li>
						<div class="become_wrap">
							<div class="become_left">
								<img src="../../assets/images/become_coach/become_03.png" />
								<input type="text" name="" id="" placeholder="请输入您的姓名"  v-model="name"  @change="nameChange($event)"/>
							</div>
							<div class="become_right" @click.stop="nameMost"><img src="../../assets/images/become_coach/become_20.png" /></div>
						</div>
					</li>

					<li>
						<div class="become_wrap">
							<div class="become_left">
								<img src="../../assets/images/become_coach/become_07.png" />
								<input type="number" name="" id="" placeholder="请输入您的联系方式" v-model="phone"  @change="phhotoChange($event)" />
							</div>
							<div class="become_right" @click.stop="phoneMost"><img src="../../assets/images/become_coach/become_20.png" /></div>
						</div>
					</li>

					<li>
						<div class="become_wrap">
							<div class="become_left">
								<img src="../../assets/images/become_coach/become_11.png" />
								<input type="number" name="" id="" placeholder="请输入短信验证码" v-model="vcode"/>
							</div>
							<div class="become_right" @click.stop="Code"><button :disabled="!sendAuthCode" :style="{background: sendAuthCode ? '#fff' : '#ccc'}">{{sendAuthCode ? '获取验证码' : '重新获取' + auth_time + '秒' }}</button></div>
						</div>
					</li>
					<li>
						<div class="become_wrap">
							<div class="become_left">
								<img src="../../assets/images/become_coach/become_14.png" />
								<input type="text" name="" id="" placeholder="请输入您的常住地址" v-model="address" @change="addressChange($event)"/>
							</div>
						</div>
					</li>

					<li>
						<div class="become_wrap">
							<div class="become_left">
								<img src="../../assets/images/become_coach/become_17.png" />
								<input type="text" name="" id="" placeholder="请输入证书名称" v-model="certificate" @change="certificateChange($event)"/>
							</div>
							<div class="become_right" @click.stop="certificateMost"><img src="../../assets/images/become_coach/become_20.png" /></div>
						</div>
					</li>

				</ul>
			</div>

			<!--自我评价-->
			<div contenteditable="true" id="content" @focus="getFocus" @blur="getBlur">
				<textarea name="" rows="" cols="" placeholder="自我评价" v-model="brief" @change="briefChange($event)"></textarea>
			</div>
			<!--自我评价结束-->

			<!--提交申请-->
			<div class="become_submit" @click.stop="submit">提交申请</div>
			<!--提交申请结束-->

		</div>
		<!--用户的信息结束-->

	</div>
</template>
<script src="../../assets/js/jquery-3.1.1.min.js"></script>
<script>
	import Vue from 'vue'
	export default {
		data() {
			return {
        sendAuthCode: true,
        /*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
        auth_time: 0,
		coach: [],
        phone:'',
        name:'',
        vcode:'',
        address:'',
        certificate:'',
        brief:''
			}
		},
		computed: {

		},
		created() {


				},

				methods: {


					getFocus(val) {
						if(!this.inputText) {
							val.target.innerText = '';
						}
					},
					getBlur(val) {
						if(val.target.innerText == '') {
							val.target.innerText = '请输入文字';
						}
					},

          nameMost() {
            this.name = "";
          },
          phoneMost(){
            this.phone = "";
          },
          certificateMost(){
            this.certificate = "";
          },
          nameChange(e) {
            this.name = e.target.value;
          },
          phhotoChange(e) {
            this.phone = e.target.value;
          },

          addressChange(e) {
            this.address = e.target.value;

          },

          certificateChange(e){
            this.certificate = e.target.value;

          },
          briefChange(e){
            this.brief = e.target.value;
            console.log(e.target.value)

          },
          Code() {
            let re = /^1\d{10}$/;
            let _this = this;
            if(this.phone) {
              if(re.test(_this.phone)) {
                var phone = _this.phone;
                let obj = {
                  phone
                };
                let qs = require('qs');
                _this.$axios.post("http://yogahome.top/yujia/user/captcha", qs.stringify(obj), {
                  headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                  },
                }).then((response) =>{
                  _this.sendAuthCode = false;
                  _this.auth_time = 60;
                  var auth_timetimer = setInterval(() => {
                    _this.auth_time--;
                    if(_this.auth_time <= 0) {
                      _this.sendAuthCode = true;
                      clearInterval(auth_timetimer);
                    }
                  }, 1000);

                }).catch(function(error) {
                  console.log(error);
                });

              } else {
                _this.sendAuthCode = true;
                alert('手机号格式不正确,请重新输入')
              }

            } else {
              _this.sendAuthCode = true;
              alert('请输入手机号码')
            }

          },
          // 提交申请
          submit(){
            let _this = this
            if(this.phone) {
              let name = this.name;   //姓名
              let phone = this.phone; //手机号
              let vcode = this.vcode; //验证码
              let address = this.address; //地址
              let certificate = this.certificate;//证书
              let brief = this.brief;   //自我评价
              let obj = {
                phone,
                vcode,
                name,
                address,
                certificate,
                brief
              };

              if(this.phone == "") {

              } else {

              }

              let qs = require('qs');
              this.$axios.post("http://yogahome.top/yujia/user/applicationToBecomeCoach", qs.stringify(obj), {
                headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
                },

              }).then((response) => {
                console.log(response)
                alert("申请成功")


              }).catch(function(error) {
                console.log(error);
              })
            }else{
              alert("请输入有效信息")
            }

          },



				}
		}
</script>

<style scoped>
	@import "../../assets/css/become_coach.css";
</style>
